<template>
	<!-- 形象视频  -->
	<view>
		<view class="flex-col page">
			<view class="flex-col line-tabs">

				<view class="flex-col group_7">
					<view class="flex-col list" v-if="this.datelist.length!=0">
						<view class="flex-col list-item" :key="i" v-for="(item, i) in datelist">
							<view class="flex-row">
								<image :src="item.address" class="image_4" />
								<text class="text_11">{{item.name}}</text>
							</view>
							<view class="group_9">
								<text class="text_13">项目进度：</text>
								<text class="text_15">{{item.processDetails}}</text>
							</view>
							<view class="group_10">
								<text class="text_17">当前房屋进程：</text>
								<text class="text_19" v-if="state!=5">正常进行中</text>
								<text class="text_19" v-else>已完成</text>
							</view>
							<view class="flex-col items-center group_11">
								<video id="myVideo" :src="item.videos" @error="videoErrorCallback" enable-danmu
									danmu-btn controls></video>
								<!-- <video :src="item.videos" @error="videoErrorCallback" controls></video> -->
							</view>
							<view class="justify-between group_12">
								<text class="text_21">{{item.createDate}}</text>
								<text class="text_22" @click="deleteBtn(item.id)">删除</text>
							</view>
						</view>
					</view>
					<view v-else>
						<u-empty style="height: 50vh;" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</view>
					<view class="flex-col items-center button" @click="add"><text class="text_29">添加当前进度</text></view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datelist: [],
				src: '',
				danmuValue: '',
				state: ''
			}
		},
		created() {
			this.getlist();
			uni.startPullDownRefresh();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			getlist() {
				const inspectionFrequencyId = uni.getStorageSync('inspectionFrequencyId')
				this.$http('onsite.getvideolist', {
					inspectionFrequencyId: inspectionFrequencyId
				}).then(res => {
					console.log(res, 'res')
					if (res.code == 200) {
						this.datelist = res.data;
					} else {
						console.log(err)
					}
				})

				const ordersId = uni.getStorageSync('ordersId');
				this.$http('common.getInfolist', {
					ordersId: ordersId,
					type: '5',
					inspectionFrequencyId: inspectionFrequencyId
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.state = res.data.ordersStatus
					}
				})
			},
			add() {
				const ordersId = uni.getStorageSync('ordersId');
				uni.navigateTo({
					url: './Housing?ordersId=' + ordersId
				})
			},
			deleteBtn(id) {
				// 删除
				this.$http('onsite.deleVideo', {
					inspectionVideosId: id
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						})
						this.getlist()
					} else {
						// console.log('1111')
						uni.showToast({
							title: res.msg,
							icon: "error"
						})
					}
				})
			},
			videoErrorCallback() {

			}
		}
	}
</script>

<style scoped lang="scss">
	.list-item {
		padding: 32rpx 23rpx 0 24rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_9 {
		margin-top: 22rpx;
		align-self: flex-start;
		line-height: 33rpx;
	}

	.group_10 {
		margin-top: 31rpx;
		align-self: flex-start;
		line-height: 33rpx;
	}

	.group_11 {
		margin-top: 33rpx;
		border-radius: 16rpx;
		position: relative;
	}

	.group_12 {
		padding: 21rpx 0 34rpx;
	}

	.image_4 {
		border-radius: 50%;
		width: 64rpx;
		height: 64rpx;
	}

	.text_11 {
		margin-left: 16rpx;
		margin-top: 10rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_13 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_15 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_17 {
		color: #666666;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_19 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_6 {
		border-radius: 16rpx;
		width: 654rpx;
		height: 328rpx;
	}

	.image_8 {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.page {
		background-color: #f6f7f9ff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 30.5rpx 21rpx 30rpx;
		background-image: url($IMG_URL+'16557870724016329987.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.line-tabs {
		margin-top: -18rpx;
		position: relative;
	}

	.group {
		padding: 24.5rpx 10.5rpx 28rpx;
		position: relative;
	}

	.section_2 {
		padding: 0 43rpx 76rpx;
		background-image: url($IMG_URL+'16557870724030238158.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_5 {
		padding-left: 40rpx;
		padding-right: 39rpx;
	}

	.group_7 {}

	.image {
		position: absolute;
		left: 10.5rpx;
		bottom: 24.5rpx;
		width: 21rpx;
		height: 36rpx;
	}

	.text {
		color: #333333;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.group_1 {
		padding: 47rpx 0 24rpx;
		border-bottom: solid 1rpx #ffffff3d;
	}

	.group_3 {
		margin-top: 28rpx;
	}

	.text_4 {
		margin-top: 18rpx;
		align-self: flex-start;
		color: #ffffff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.group_4 {
		margin-top: 22rpx;
	}

	.image_3 {
		margin-right: 226rpx;
		margin-top: 14rpx;
		align-self: flex-end;
		width: 40rpx;
		height: 16rpx;
	}

	.list {
		padding: 24rpx 0;
	}

	.button {
		padding: 20rpx 0;
		background-color: #1d6aff;
		border-radius: 44rpx;
		position: fixed;
		bottom: 30rpx;
		left: 5%;
		width: 90%;
		z-index: 99;
	}

	.image_2 {
		align-self: center;
		width: 26rpx;
		height: 26rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_3 {
		margin-top: 13rpx;
		color: #ffffff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_5 {
		color: #ffffff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_6 {
		margin-left: 14.5rpx;
		color: #ffffff;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_7 {
		margin-top: 4rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		margin-top: 4rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_9 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_10 {
		margin-top: 4rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.list-item:last-of-type {
		margin-top: 20rpx;
	}

	.text_29 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_1 {
		flex-shrink: 0;
		border-radius: 50%;
		width: 96rpx;
		height: 96rpx;
	}

	.text_1 {
		margin-left: 32rpx;
		margin-top: 19rpx;
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.text_21 {
		margin-top: 6rpx;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_22 {
		margin-bottom: 6rpx;
		color: #ff371d;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}
</style>
